<template>
	<view class="search">
		<view class="search-input">
			<input :placeholder="placeholder" :value="modelValue" @input="onSearch" />
			<image v-if="modelValue.length > 0 && isClear" src="@/static/icon/close.png" mode="aspectFill" style="width: 32rpx;height: 32rpx;" @click="clearIcon"></image>
		</view>
		<image v-if="isScan" src="@/static/icon/scan.png" mode="aspectFill" style="width: 32rpx;height: 32rpx;padding: 16rpx 0 16rpx 16rpx;" @click="onScan">
		</image>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		computed,
		watchEffect
	} from 'vue'
	const props = defineProps({
		modelValue: {
			type: String,
			default: ""
		},
		placeholder: {
			type: String,
			default: "请输入项目名称"
		},
		isScan: {
			type: Boolean,
			default: false
		},
		isClear: {
			type: Boolean,
			default: false
		},
	});
	const emit = defineEmits(["onSearch","update:modelValue","onScan"]);
	const onSearch = (e)=> {
		emit("update:modelValue",e.detail.value)
		emit("onSearch")
	}
	const clearIcon = ()=> {
		emit("update:modelValue","")
		emit("onSearch")
	}
	const onScan = ()=> {
		uni.scanCode({
			success: function (res) {
				console.log('条码类型：' + res.scanType);
				console.log('条码内容：' + res.result);
				emit("onScan",res.result)
			}
		});
	}
</script>

<style lang="scss" scoped>
	.search {
		display: flex;
		align-items: center;
		background: #F5F6FA;
		border-radius: 31rpx;
		padding: 0 32rpx;
		&-input {
			flex: 1;
			display: flex;
			align-items: center;
			&>input{
				height: 64rpx;
				flex: 1;
			}
		}
	}
</style>